<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css（）          功能：
		                  1个参：传入css属性名
						  功能：获取匹配元素集合中第一个元素的css属性值
						  2个参：
						  n个参：
		 width()和height()
		 outerWidth()和outheight()
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .box{
				 background-color: aqua;
				 padding: 20px;
				 margin: 20px;
				 border: 5px solid black;
				 width: 100px;
				 height: 100px;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: bold;
			 }
		 </style>
	</head>
	<body>
		<!-- css:.box添加样式：背景颜色、内外边距：20px -->
		<!-- 1.显示效果区域 -->
		<div class="box"></div>
		<button id="btn">获取颜色属性值</button>
		<button id="btn1">设置一个颜色效果</button>
		<button id="btn2">设置多个属性</button>
		<button id="btn3">获取宽高属性</button>
		<button id="btn4">设置宽高</button>
		<button id="btn5">获取元素外部宽高度</button>
		<button id="btn6">设置了外部宽高度（间接设置元素宽高值）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result"></div>
		<script>
			// 1.点击
			$("#btn").click(function(){
				var p=$(".box").css("background-color");
				$(".result").text(p);
			});
			//2.设置颜色
			$("#btn1").click(function(){
				//设置不能用变量接收
				$(".box").css("background-color","blue");			
				$(".result").text("颜色已改变为蓝色");
			});
			//3.点击设置多属性效果 按钮 圆、背景色、阴影
			$("#btn2").click(function(){
				$(".box").css({"background-image":"url(../img/勾子之神.jpg)",
				               "border":"10px solid black",
							   "border-radius":"100%",
							   "width":"300px",
							   "height":"300px",
							   
							   });
				
			});
			//4.获取宽高属性值
			$("#btn3").click(function(){
				var p=$(".box").width();
				$(".result").text(p);
			});
			//5.设置宽高属性
			$("#btn4").click(function(){
				var p=$(".box").width("300px").height("300px");
				$(".result").text("宽度和高度被设置为300px");
			});
			//6.获取元素外部宽高度(加true就加上margin的值了)
			$("#btn5").click(function(){
				var p=$(".box").outerHeight(true);
				$(".result").text(p);
			});
			//7.设置了外部宽高度（间接设置元素宽高值）
			$("#btn6").click(function(){
				$(".box").outerHeight("200");
				
			});
		</script>
	</body>
</html>